<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:cc="http://java.sun.com/jsf/composite/cc">

<ui:composition template="/resources/layout/training-layout.xhtml">
    <f:loadBundle basename="za.co.yellowfire.ui.resources.messages" var="msg"/>
	<ui:define name="demoSampleParameters">
		<f:metadata>
            <f:viewParam name="section" value="#{navigator.section}" />
			<f:viewParam name="item" value="#{navigator.item}" />
			<f:viewParam name="skin" value="#{skinBean.skin}"/>
		</f:metadata>
	</ui:define>
    <ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</ui:define>
    <ui:define name="toolbar">
        <h:form prependId="false">
            <p:menubar widgetVar="t">
                <c:forEach items="#{raceController.menu.subMenus}" var="subMenu" varStatus="subMenuStatus">
                    <p:submenu label="#{subMenu.text}">
                        <c:forEach items="#{subMenu.menuItems}" var="menuItem" varStatus="menuItemStatus">
                            <p:menuitem value="#{menuItem.text}"  url="#{menuItem.url}" />
                        </c:forEach>
                    </p:submenu>
                </c:forEach>
            </p:menubar>
        </h:form>
    </ui:define>
	<ui:define name="content">
        <p:growl showDetail="true" showSummary="true" />
        <h:form>

            <div class="ui-panel-titlebar ui-widget-header"><span class="ui-panel-title">#{sessionController.race.name}</span></div>
            <p:tabView dynamic="true" cache="true">
                <p:tab title="General">
                    <h:panelGrid columns="2" columnClasses="align-top width-fifty-pct,align-left" styleClass="width-hundred-pct">
                        <h:panelGrid columns="1" style="width:100%">
                            <div class="ui-panel-titlebar ui-widget-header ui-corner-all"><span class="ui-panel-title">Information</span></div>
                        </h:panelGrid>
                        <h:panelGrid columns="1" style="width:100%">
                            <div class="ui-panel-titlebar ui-widget-header ui-corner-all"><span class="ui-panel-title">Sponsors</span></div>
                        </h:panelGrid>
                        <h:panelGrid columns="2">
                        	<h:outputLabel value="#{msgs['fld.district']}:" for="districtName"/>
                            <h:outputText id="districtName" value="#{sessionController.race.district.code} - #{sessionController.race.district.name}"/>
                            <h:outputLabel value="Race:" for="raceName"/>
                            <h:outputText id="raceName" value="#{sessionController.race.name}"/>
                            <h:outputLabel value="Date:" for="raceDate"/>
                            <h:outputText id="raceDate" value="#{sessionController.race.date}"><f:convertDateTime timeStyle="medium" type="date"/></h:outputText>
                            <h:outputLabel value="Venue:" for="venueName"/>
                            <h:outputText id="venueName" value="#{sessionController.race.venue.name}"/>
                            <h:outputLabel value="Address:" for="venueAddress"/>
                            <h:outputText id="venueAddress" value="#{sessionController.race.venue.address}"/>
                            <h:outputLabel value="GPS:" for="venueGPS"/>
                            <h:outputText id="venueGPS" value="#{sessionController.race.venue.gps}"/>
                        </h:panelGrid>
                        <h:panelGrid columns="1">
                            <c:forEach items="#{sessionController.race.sponsors}" var="sponsor" varStatus="sponsorStatus">
                            	<a href="#{sponsor.sponsorLink.linkURL}">#{sponsor.name}</a>
                            	
                            </c:forEach>
                        </h:panelGrid>
                    </h:panelGrid>
                </p:tab>
                <c:forEach items="#{sessionController.race.courses}" var="course">
                    <p:tab title="#{course.distance} @ #{course.startTimeString}">
                        <h:panelGrid columns="1">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Distance:"/>
                                <h:outputText value="#{course.distance}"/>
                                <h:outputLabel value="Start Time:"/>
                                <h:outputText value="#{course.startTimeString}"/>
                                <h:outputLabel value="Info:"/>
                                <h:outputText value="#{course.description}"/>
                            </h:panelGrid>
                            <h:panelGrid columns="2" columnClasses="align-top">
                            <c:forEach items="#{course.categories}" var="category" varStatus="categoryStatus">
                                <p:panel header="#{category.name}">
                                <h:panelGrid columns="2" columnClasses="align-top">
                                     <h:panelGrid columns="1"> <!--Fees-->
                                         <h:outputText value="Fees"/>
                                         <p:dataTable var="fee" value="#{category.feesList}">
                                             <p:column>
                                                 <f:facet name="header">Fee</f:facet>
                                                 <h:outputText value="#{fee.description}" />
                                             </p:column>
                                             <p:column>
                                                 <f:facet name="header">Value</f:facet>
                                                 <h:outputText value="#{fee.value}" />
                                             </p:column>
                                         </p:dataTable>
                                    </h:panelGrid>
                                     <h:panelGrid columns="1"> <!--Prizes-->
                                         <h:outputText value="Prizes"/>
                                         <p:dataTable var="prize" value="#{category.prizesList}" style="vertical-align:text-top;">
                                             <p:column>
                                                 <f:facet name="header">Prize</f:facet>
                                                 <h:outputText value="#{prize.description}" />
                                             </p:column>
                                             <p:column>
                                                 <f:facet name="header">Value</f:facet>
                                                 <h:outputText value="#{prize.value}" />
                                             </p:column>
                                         </p:dataTable>
                                    </h:panelGrid>
                                </h:panelGrid>
                                </p:panel>
                            </c:forEach>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:tab>
                </c:forEach>
                <p:tab title="Map">
                    <p:gmap center="#{sessionController.race.venue.gps}" zoom="15" type="ROADMAP" style="width:600px;height:400px" rendered="#{sessionController.race.venue.gps ne null}" model="#{sessionController.raceMapModel}" />
                    <p:graphicImage value="../resources/images/no-map.gif" style="width:600px;height:400px" rendered="#{sessionController.race.venue.gps eq null}" />
                </p:tab>
                <p:tab title="General">
                    <h:panelGrid columns="1">
                        <c:forEach items="#{sessionController.race.generalNotes}" var="note" varStatus="noteStatus">
                            <h:outputText value="#{note.text}"/>
                        </c:forEach>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Registration">
                    <h:panelGrid columns="1">
                        <c:forEach items="#{sessionController.race.registrationNotes}" var="note" varStatus="noteStatus">
                            <h:outputText value="#{note.text}"/>
                        </c:forEach>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Accomodation">
                    <h:panelGrid columns="1">
                        <c:forEach items="#{sessionController.race.accomodationNotes}" var="note" varStatus="noteStatus">
                            <h:outputText value="#{note.text}"/>
                        </c:forEach>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Rules">
                    <h:panelGrid columns="1">
                        <c:forEach items="#{sessionController.race.rulesNotes}" var="note" varStatus="noteStatus">
                            <h:outputText value="#{note.text}"/>
                        </c:forEach>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Prizes">
                    <h:panelGrid columns="1">
                        <c:forEach items="#{sessionController.race.prizesNotes}" var="note" varStatus="noteStatus">
                            <h:outputText value="#{note.text}"/>
                        </c:forEach>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Medals">
                    <h:panelGrid columns="1">
                    <c:forEach items="#{sessionController.race.medalsNotes}" var="note" varStatus="noteStatus">
                        <h:outputText value="#{note.text}"/>
                    </c:forEach>
                    </h:panelGrid>
                </p:tab>
            </p:tabView>
 
        </h:form>
	</ui:define>
</ui:composition>

</html>